<template>
  <scroll-view
    :scroll-x="scroll"
    scroll-with-animation
    :scroll-into-view="scrollIntoViewId"
    :show-scrollbar="false"
    class="tabs-top"
    ref="tabsRef"
    :style="{
      '--height': height,
      '--width': col == 0 ? width + '%' : width + 'rpx',
      position: sticky ? 'sticky' : 'relative',
      top: sticky ? top : null,
      borderTopLeftRadius: round,
      borderTopRightRadius: round,
      boxShadow: boxShadow ? '0 -10rpx 20rpx 2rpx rgba(78, 167, 112, 0.16)' : 'none',
    }"
  >
    <view
      class="tabs-item"
      v-for="(i, k) in list"
      :key="k"
      :id="`item${k}`"
      @click="changeTab(i, k)"
      :style="{
        color: k == current ? '#fff' : '#212121',
      }"
    >
      <text> {{ i[keyName] }}</text>
    </view>
    <view
      class="check"
      :style="{
        '--checkWidth': col == 0 ? width + '%' : width + 'rpx',
        left: col == 0 ? width * current + '%' : width * current + 'rpx',
        borderTopLeftRadius: square ? (current == 0 ? round : 0) : round,
        borderTopRightRadius: square ? (current == list.length - 1 ? round : 0) : round,
      }"
    />
  </scroll-view>
</template>

<script>
export default {
  props: {
    // tab列表
    list: {
      type: Array,
      default: () => [],
    },
    // 当前选中
    current: {
      type: Number,
      default: 0,
    },
    // tab高度
    height: {
      type: String,
      default: "80rpx",
    },
    // 圆角
    round: {
      type: String,
      default: "20rpx",
    },
    // 是否为方形
    square: {
      type: Boolean,
      default: false,
    },
    // 是否吸顶
    sticky: {
      type: Boolean,
      default: false,
    },
    // 吸顶距离
    top: {
      type: String,
      default: "0",
    },
    // tab显示数量
    col: {
      type: Number,
      default: 0,
    },
    // 滚动
    scroll: {
      type: Boolean,
      default: true,
    },
    // list元素中读取键名
    keyName: {
      type: String,
      default: "label",
    },
    // 是否显示阴影
    boxShadow: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      width: 0,
      scrollIntoViewId: "",
    };
  },
  mounted() {
    this.getSystemInfo();
    uni.onWindowResize(() => {
      this.getSystemInfo();
    });
  },
  methods: {
    // tab切换
    changeTab(item, index) {
      this.scrollIntoViewId = `item${index}`;
      this.$emit("update:current", index);
      this.$emit("change", { ...item, index });
    },
    // 计算宽度
    getSystemInfo() {
      const query = uni.createSelectorQuery().in(this);
      query
        .select(".tabs-top")
        .boundingClientRect((rect) => {
          if (this.col == 0) {
            this.width = 100 / this.list.length;
          } else {
            this.width = Math.floor(2 * ((rect.width) / this.col));
          }
        })
        .exec();
    },
  },
};
</script>

<style lang="scss" scoped>
.tabs-top {
  --height: auto;
  --width: auto;
  width: 100%;
  --checkWidth: 166px;
  border-bottom: 2rpx solid #e6f1e9;
  background-color: #fff;
  position: relative;
  white-space: nowrap;
  z-index: 99;
  .tabs-item {
    display: inline-block;
    width: var(--width);
    height: var(--height);
    line-height: var(--height);
    text-align: center;
    font-size: 28rpx;
    transition: color 0.3s;
    vertical-align: middle;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    text {
      position: relative;
      z-index: 2;
    }
  }
  .check {
    position: absolute;
    top: 0;
    width: var(--checkWidth);
    height: var(--height);
    background: #4ea770;
    z-index: 1;
    transition: all 0.3s;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }
}
</style>
